<template>
  <div class="select_network_dialog" v-if="visible">
    <!-- 选择网络主体 -->
    <div class="select_network_content" :style="{ top: `${curTop}vh` }">
      <!-- 标题 -->
      <div class="dialog_title">
        <span>选择网络</span>
        <img @click="visible = false" src="@/assets/common/close_icon.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="dialog_content">
        <div class="notice add_text">
          <img src="@/assets/assets/warning_icon.png" alt="" />
          <div>
            当你充值该币时，仅限于通过下方支持的网络充值，如果您通过其他网络充值可能会造成资金丢失。
          </div>
        </div>
        <!-- 网络列表 -->
        <ul class="network_list">
          <li v-for="(item, index) in 4" :key="index">
            <div class="add_text">Tro(TRC20){{ item }}</div>
            <div>1次区块确认</div>
            <div>最低充值>0.01 USDT</div>
            <div>预计到账2分钟</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

// 是否显示
const visible = ref(false);
// 滑动
const curTop = ref(100);

// 网络列表
// const networkList = ref([])

// 监视是否显示
watch(
  () => visible.value,
  (newVal) => {
    if (newVal) {
      curTop.value = 15;
    } else {
      curTop.value = 100;
    }
  }
);

defineExpose({
  visible,
});
</script>

<style lang="scss" scoped>
.select_network_dialog {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2);
  .select_network_content {
    width: 100vw;
    height: 85vh;
    background-color: #202126;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    position: absolute;
    top: 15vh;
    transition: all 2s;
    .dialog_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dialog_content {
      margin-top: 20px;
      .notice {
        background-color: #16e65c1a;
        display: flex;
        align-items: center;
        padding: 10px;
        div {
          text-align: left;
          margin-left: 10px;
          font-size: 14px;
        }
      }
      .network_list {
        margin-top: 10px;
        text-align: left;
        // overflow: scroll;
        // height: 70vh;
        li {
          padding: 10px;
          background-color: #384046;
          border-radius: 10px;
          margin-bottom: 10px;
          & > div {
            margin-bottom: 5px;
          }
          & > div:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
